{% extends 'index.html' %}

{% block head %}
<style type="text/css">
    .display_none{display: none;}
</style>

{% endblock %}

{% block bodyweigh %}
<body style="width: 4000px; background-size: 4000px 100%;">
{% endblock %}

{% block content %}
    <style>
        .black_overlay{
         display: none;
         position: absolute;
         top: 0%;
         left: 0%;
         width: 100%;
         height: 100%;
         background-color: black;
         z-index:1001;
         -moz-opacity: 0.8;
         opacity:.80;
         filter: alpha(opacity=80);
        }
        .white_content {
         display: none;
         position: absolute;
         top: 10%;
         left: 68%;
         width: 25%;
         height: 60%;
         border: 16px solid lightblue;
         background-color: white;
         z-index:1002;
         overflow: auto;
        }
        .white_content_small {
         display: none;
         position: absolute;
         top: 20%;
         left: 30%;
         width: 40%;
         height: 50%;
         border: 16px solid lightblue;
         background-color: white;
         z-index:1002;
         overflow: auto;
        }
    </style>
    <script type="text/javascript">
        //弹出隐藏层
        function ShowDiv(show_div,bg_div,event_id){
         document.getElementById(show_div).style.display='block';
         document.getElementById(bg_div).style.display='block' ;
         var bgdiv = document.getElementById(bg_div);
         bgdiv.style.width = document.body.scrollWidth; 
         // bgdiv.style.height = $(document).height();
         $("#"+bg_div).height($(document).height());

         params = {
                "id":event_id,
            }

        console.log(params);
         $.ajax({
                url:"/app/get/award_detail",
                type:"POST",
                data:JSON.stringify(params),
                contentType:'application/json',
                success:function(res){
                    if(res.status == 0){
                        $("#award_detail").empty();
                        $.each(res.award,function(i,item){
                            $("#award_detail").append(
                                    '<span>'+(i+1)+"等奖:"+item +'</span> &emsp;'                    
                                );

                        });
                        
                    }else {
                        alert(res.msg);
                    }
                }
        })

        };
        //关闭弹出层
        function CloseDiv(show_div,bg_div)
        {
         document.getElementById(show_div).style.display='none';
         document.getElementById(bg_div).style.display='none';
        };
    </script>
<div class="display_none"><select style="color: #000;" class="game_select"></select></div>

    <div id="fade" class="black_overlay">
    </div>
     <div id="MyDiv" class="white_content" style="color: #000;">
      <div style="text-align: right; cursor: default; height: 40px;">
       <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
      </div style="color: #000;">
        <div id="award_detail"></div>
     </div> 

    <!-- 右侧主体开始 -->

        <div class="page-content" >
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <form class="layui-form xbs" action="" >
                <div class="layui-form-pane" style="text-align: center;">
                  <div class="layui-form-item" style="display: inline-block;">
                    <label class="layui-form-label xbs768">日期范围</label>
                    <div class="layui-input-inline xbs768">
                      <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
                    </div>
                    <div class="layui-input-inline xbs768">
                      <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
                    </div>
                    <div class="layui-input-inline">
                      <input type="text" name="username" id="name" placeholder="请输入赛事名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width:80px">
                        <div class="layui-btn" id="search"><i class="layui-icon">&#xe615;</i></div>
                    </div>
                  </div>
                </div> 
            </form>
            <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button><button class="layui-btn" onclick="member_add('添加赛事','/app/show/add_event','600','500')"><i class="layui-icon">&#xe608;</i>添加</button><span class="x-right" style="line-height:40px" id="counts"></span></xblock>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="" value="">
                        </th>
                        <th>
                            ID
                        </th>
                        <th>
                            赛事主题
                        </th>
                        <th>
                            赛事类型
                        </th>
                        <th>
                            赛事子类型
                        </th>
                        <th>
                            赛事状态
                        </th>
                        <th>
                            赛事主题图
                        </th>

                        <th>
                            赛事介绍
                        </th>
                        <th>
                            赛事规则
                        </th>
                        <th>
                            报名开始时间
                        </th>
                        <th>
                            报名截止时间
                        </th>
                        <th>
                            赛事开始时间
                        </th>
                        <th>
                            赛事结束时间
                        </th>
                        <th>
                            普通or热门
                        </th>
                        <th>
                            一等奖
                        </th>
                        <th>
                            二等奖
                        </th>
                        <th>
                            三等奖
                        </th>
                        <th>
                            当前队伍数
                        </th>
                        <th>
                            当前报名人数
                        </th>
                        <th>
                            赛事最大队伍数
                        </th>
                        <th>
                            一只队伍最多人数
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody id="content">
                   
                </tbody>
            </table>
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
{% endblock %}

{% block script %}
 <!-- 页面动态效果 -->
    <script>

        layui.use(['laydate'], function(){
          laydate = layui.laydate;//日期插件

          //以上模块根据需要引入
          //
          

          
          var start = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              end.min = datas; //开始日选好后，重置结束日的最小日期
              end.start = datas //将结束日的初始值设定为开始日
            }
          };
          
          var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              start.max = datas; //结束日选好后，重置开始日的最大日期
            }
          };
          
          document.getElementById('LAY_demorange_s').onclick = function(){
            start.elem = this;
            laydate(start);
          }
          document.getElementById('LAY_demorange_e').onclick = function(){
            end.elem = this
            laydate(end);
          }
          
        });

        //批量删除提交
         function delAll () {
            layer.confirm('确认要删除吗？',function(index){
                //捉到所有被选中的，发异步进行删除
                layer.msg('删除成功', {icon: 1});
            });
         }
         /*用户-添加*/
        function member_add(title,url,w,h){
            x_admin_show(title,url,w,h);
        }
        /*用户-查看*/
        function member_show(title,url,id,w,h){
            x_admin_show(title,url,w,h);
        }



        // 用户-编辑
        function member_edit (title,url,id,w,h) {
            x_admin_show(title,url,w,h); 
        }

        /*用户-删除*/
        function member_del(obj,id){
            layer.confirm('确认要删除吗？',function(index){
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已删除!',{icon:1,time:1000});
            });
        }
        </script>

        
        <script>



            $("#counts").html("共有数据：{{ data|count }} 条")

            {% for type in game_types %}

            $(".game_select").append('<option value="{{loop.index}}">{{type}}</option>')
            
            {% endfor %}

            {% for i in data %}

            var has_teams = '{{i.has_teams}}';
            var peoples = '{{i.peoples}}';
            var game_id = '{{i.game_id}}';
            game_id = parseInt(game_id);
            has_teams = parseInt(has_teams);
            peoples = parseInt(peoples);
            var has_people = has_teams * peoples;

            $("#content").append(

                    '<tr>'+
                        '<td>'+
                            '<input type="checkbox" value="{{loop.index}}" name="">'+
                        '</td>'+
                        '<td>'+
                            '{{loop.index}}'+
                        '</td>'+
                        '<td>'+
                            '<input style="color: #000;" type="text" class="title" value="{{ i.event_title }}">'+
                        '</td>'+
                        '<td>'+
                            '{% if i.event_type_id==1 %} 官方赛 {% elif i.event_type_id==2%} 平台赛 {% elif i.event_type_id==3%}业余赛{% endif %}'+
                        '</td>'+
                        '<td>'+                      
                            $(".game_select option[value='"+game_id+"']").html()+
                        '</td>'+
                        '<td>'+                      
                            '{{i.event_now_type}}'+
                        '</td>'+
                        '<td>'+    
                            '<img style="width:50px;height:50px" src="{{ i.event_icon }}" >&emsp;&emsp;<input type="file" class="image" accept="image/*"/><input type="hidden" class="imgurl" value=""/><input type="hidden" class="is_change" value="0"/>'+
                        '</td>'+

                        '<td>'+
                            '<input style="color: #000;" type="text" class="introduce" value="{{ i.event_introduce }}">'+
                        '</td>'+
                        '<td>'+
                            '<input  style="color: #000;" type="text" class="rule" value="{{ i.event_rule }}">'+
                        '</td>'+
                        '<td>'+
                            '<input style="color: #000;" type="text" class="apply_stime" value="{{ i.event_apply_stime }}">'+
                        '</td>'+
                        '<td>'+
                            '<input style="color: #000;" type="text" class="apply_etime" value="{{ i.event_apply_etime }}">'+
                        '</td>'+
                        '<td>'+
                            '<input style="color: #000;" type="text" class="game_stime" value="{{ i.event_game_stime }}">'+
                        '</td>'+
                        '<td>'+
                            '<input style="color: #000;" type="text" class="game_etime" value="{{ i.event_game_etime }}">'+
                        '</td>'+
                        '<td>'+
                        '<select id="select{{loop.index}}" style="color: #000;"> <option style="color: #000;" value ="0" {% if i.hot_status==0 %}selected = "selected"{% else %}{% endif %} >普通赛事</option><option style="color: #000;" value ="1" {% if i.hot_status==1 %}selected = "selected" {% else %}{% endif %} >热门赛事</option></select><input type="hidden" class="hot_status" value="{{ i.hot_status }}"/>'+
                        '</td>'+
                        '<td>'+
                            '{{i.first}}'+
                        '</td>'+
                        '<td>'+
                            '{{i.second}}'+
                        '</td>'+
                        '<td>'+
                            '{{i.third}}'+
                        '</td>'+
                        '<td>'+
                            '{{i.has_teams}}'+
                        '</td>'+
                        '<td>'+
                            has_people+
                        '</td>'+
                        '<td>'+
                            '{{i.max_teams}}'+
                        '</td>'+
                        '<td>'+
                            '{{i.peoples}}'+
                        '</td>'+
                        '<td class="td-manage">'+
                            '<button type="button" style="color: #000;" class="modify">保存</button>  &emsp;'+
                            '<button type="button" style="color: #000;" class="delete">删除</button>  &emsp;'+
                            '<input style="color: #000;"  type="button" value="查看所有奖品" onclick="ShowDiv('+"'MyDiv'"+",'fade'"+",'{{i.event_id}}'"+")"+'" />'+
                            // <input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade','{{i.event_id}}')" />
                        '</td>'+
                        '<input type="hidden" class="id" value="{{ i.event_id }}"  />'+
                    '</tr>')

                $("#select{{loop.index}}").on("click",function(){
                    var hot_status = $("#select{{loop.index}} option:selected").val();
                    $(this).next().val(hot_status);
                });
    
                {% endfor %}


            function strDateTime(str) {
                var reg = /^[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}$/;
                var r = str.match(reg);
                if(r==null) {
                    return false;
                }else {
                    return str;
                }
            }


            $(".image").change(function(){
                var imageurl = $(this).next();
                var file = this.files[0];
                if (window.FileReader) {
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        //监听文件读取结束后事件
                      reader.onloadend = function (e) {
                        imageurl.val(e.target.result);    //e.target.result就是最后的路径地址
                          imageurl.next().val(1);
                        };
                   }
            });

         $(".modify").on("click",function() {
            var id = $(this).parent().parent().find(".id").val();
            var title = $(this).parent().parent().find(".title").val();


            var rule = $(this).parent().parent().find(".rule").val();
            var image = $(this).parent().parent().find(".imgurl").val();
            var is_change = $(this).parent().parent().find(".is_change").val();
            var apply_stime = $(this).parent().parent().find(".apply_stime").val();
            var apply_etime = $(this).parent().parent().find(".apply_etime").val();
            var game_stime = $(this).parent().parent().find(".game_stime").val();
            var game_etime = $(this).parent().parent().find(".game_etime").val();

            var introduce = $(this).parent().parent().find(".introduce").val();
            var hot_status = $(this).parent().parent().find(".hot_status").val();        
                    

            var time1 = strDateTime(apply_stime);
            var time2 = strDateTime(apply_etime);
            var time3 = strDateTime(game_stime);
            var time4 = strDateTime(game_etime);

            if (time1 == false || apply_stime == "") {
                alert('请检查时间格式是否符合:2018-07-03 15:50:23，且报名开始时间不能为空');
                return false;
            }
            if (time2 == false || apply_stime == "") {
                alert('请检查时间格式是否符合:2018-07-03 15:50:23，且报名结束时间不能为空');
                return false;
            }

            if (game_stime == "") {
            } else {
                if (time3 == false) {
                    alert('请检查时间格式是否符合:2018-07-03 15:50:23');
                    return false;
                }
            }
            if (game_etime == "") {
            } else {
                if (time4 == false) {
                    alert('请检查时间格式是否符合:2018-07-03 15:50:23');
                    return false;
                }
            }

            if (game_stime != "" && game_etime == ""){
                alert('赛事开始时间和赛事结束时间必须同时添加');
                return false;
            }
            if (game_etime != "" && game_stime == ""){
                alert('赛事开始时间和赛事结束时间必须同时添加');
                return false;
            }
            params = {
                "id":id,
                "title":title,

                "rule":rule,
                "icon":image,
                "is_change":is_change,
                "apply_stime":apply_stime,
                "apply_etime":apply_etime,
                "game_stime":game_stime,
                "game_etime":game_etime,

                "introduce":introduce,
                "hot_status":hot_status,

            };


            $.ajax({
                url:"/app/event/modify",
                type:"POST",
                data:JSON.stringify(params),
                contentType:'application/json',
                success:function(res){
                    if(res.status == 0){
                        alert(res.msg);
                        
                        location.href="/app/show/event";
                    }else {
                        alert(res.msg);
                    }
                }
            })
        });


        $(".delete").on("click",function(){
            var id = $(this).parent().parent().find(".id").val();
            params = {"id":id};
            $.ajax({
                url:"/app/event/delete",
                type:"POST",
                data:JSON.stringify(params),
                contentType:'application/json',
                success:function(res){
                    if(res.status == 0){
                        alert(res.msg);

                        location.href="/app/show/event";
                    }else {
                        alert(res.msg);
                    }
                }
            })
        });


        $("#search").on("click",function(){

                var name = $("#name").val();

                if ( name == "" ) {
                    location.href="/app/show/event";
                }else{

                    location.href="/app/show/event?name="+name;
                }
        });

        

    </script>

{% endblock %}